<template>
  <div class="route-auth-wrapper">
    <section class='handle-line'>
      <type-button
        size='small'
        type='add'
        @handleClick="startAddRoute">
      </type-button>
    </section>
    <section class="table-wrapper">
      <el-table
        ref='routeRef'
        :data="routeList"
        stripe
        style="width: 100%">
        <el-table-column
          show-overflow-tooltip
          prop="routeName"
          width='400'
          label="名称">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="route"
          label="路径">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width='120'>
          <template slot-scope="scope">
            <span class="handleBtn" @click="startEditRoute(scope.row)">编辑</span>
            <span class="handleBtn" @click="startDeleteRoute(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:right;margin-top:18px!important;"
        background
        :page-size="pageSize"
        :page-sizes="pageSizesG"
        @size-change="handleSizeChange"
        :current-page="page"
        @current-change="handleCurrentChange"
        layout="sizes, prev, pager, next"
        :total="count">
      </el-pagination>
    </section>
    <!-- 创建/编辑 路由权限 -->
    <el-dialog
      width="600px"
      :title="currRoute.id ? `编辑路由` : '添加路由'"
      :visible.sync="isSettingRoute"
      :close-on-click-modal="false"
      append-to-body
      class='normal-dialog h-border'
      v-loading='isLoading'>
      <div class="main-box">
        <div class="customer-setting">
          <el-form
            :model="currRoute"
            label-position="right"
            label-width="105px">
            <el-form-item
              label="路由名称："
              prop="routeName">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入路由名称"
                v-model="currRoute.routeName">
              </el-input>
            </el-form-item>
            <el-form-item
              label="路由路径："
              prop="route">
              <el-input
                type="text"
                class='form-input-item w340 h32'
                placeholder="请输入路由路径"
                v-model="currRoute.route">
              </el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog-footer" slot='footer'>
        <el-button class='cancel-btn' size='small' @click="isSettingRoute = false">取 消</el-button>
        <el-button class='confirm-btn' size='small' type="primary" @click="saveSettingRoute">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TypeButton from '@/public/typeButton'
export default {
  name: 'routeAuth',
  data () {
    return {
      routeList: [],
      isLoading: false,
      currRoute: {},
      isSettingRoute: false,
      mode: 'add',
      page: 1,
      pageSize: 10,
      count: 0
    }
  },
  components: {
    TypeButton
  },
  props: {
    appInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  methods: {
    startAddRoute () {
      this.mode = 'add'
      this.currRoute = {
        routeName: '',
        route: ''
      }
      this.isSettingRoute = true
    },
    startEditRoute (route) {
      this.mode = 'edit'
      this.currRoute = route
      this.isSettingRoute = true
    },
    startDeleteRoute (route) {
      this.$confirm('删除后此路由将禁止访问，确定删除此路由吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.isLoading = true
        let url = `${this.SERVICE_SYS}/app/routes/remove/${route.id}`
        this.deletes(url).then(res => {
          this.isLoading = false
          if (res.data.code === 200) {
            this.showSucc('删除成功')
            this.getRouteList()
          }
        }).catch(e => {
          this.isLoading = false
          this.handleError(e)
        })
      }).catch(() => {
      })
    },
    saveSettingRoute () {
      if (!this.currRoute.routeName) {
        return this.showWarning('请先输入路由名称')
      }
      if (!this.currRoute.route) {
        return this.showWarning('请先输入路由路径')
      }
      this.isLoading = true
      let params = {
        routeName: this.currRoute.routeName,
        route: this.currRoute.route,
        systemAppid: this.appInfo.appId,
        id: this.currRoute.id || null
      }
      let url = `${this.SERVICE_SYS}/app/routes/saveOrUpdate`
      this.posts(url, params).then(res => {
        this.isLoading = false
        if (res.data.code === 200) {
          this.showSucc('操作成功')
          this.getRouteList()
          this.isSettingRoute = false
        }
      }).catch(e => {
        this.isLoading = false
        this.handleError(e)
      })
    },
    handleSizeChange (val) {
      this.page = 1
      this.pageSize = val
      this.getRouteList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getRouteList()
    },
    // 获取路由列表
    getRouteList () {
      let params = {
        currentPage: this.page,
        pageSize: this.pageSize
      }
      let url = `${this.SERVICE_SYS}/app/routes/${this.appInfo.appId}`
      this.get(url, params).then(res => {
        if (res.data.code === 200 && res.data.data) {
          this.routeList = res.data.data.list
          this.count = +res.data.data.total
        }
      }).catch(e => {
        this.handleError(e)
      })
    }
  },
  created () {
    this.getRouteList()
  }
}
</script>

<style scoped lang="stylus">
.route-auth-wrapper
  padding 16px 0
  box-sizing border-box
  scroll()
  height calc(100vh - 250px)
  .handle-line
    margin-bottom 16px
    display flex
    justify-content flex-end
  .table-wrapper
    >>> .handleBtn
      color #3496ff
      margin-right 16px
      cursor pointer
.normal-dialog
  >>> .el-dialog
    margin-top 10vh !important
    .main-box
      padding 0 20px 0 0
      .customer-setting
        position relative
        >>>.el-form-item
          margin-bottom: 8px
</style>
